<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>个人信息</title>
    <link href="${pageContext.request.contextPath}/static/images/houserent.ico" rel="icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/module/admin.css?v=318" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/font-awesome.min.css" media="all">
    <style>
        /* 用户信息 */
        .user-info-head {
            width: 110px;
            height: 110px;
            line-height: 110px;
            position: relative;
            display: inline-block;
            border: 2px solid #eee;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }

        .user-info-head img {
            width: 110px;
            height: 110px;
        }

        .user-info-list-item {
            position: relative;
            padding-bottom: 8px;
        }

        .user-info-list-item>.layui-icon {
            position: absolute;
        }

        .user-info-list-item>p {
            padding-left: 30px;
        }

        /* 基本信息 */
        #userInfoForm .layui-form-item {
            margin-bottom: 25px;
        }
        .layui-upload{
            margin-top: 50px;
            margin-left: 50px;
        }
    </style>
</head>
<body onscroll="layui.admin.hideFixedEl();" class="theme-pink close-footer">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img src="/images/userimgs/${user.uuidName==null?"1.png":user.uuidName}" alt="" />
                        </div>
                        <h2 style="padding-top: 20px;">${user.userName}</h2>
                    </div>
                    <div class="layui-text" style="padding-top: 30px;">
                        <div class="user-info-list-item">
                            <i class="layui-icon layui-icon-username"></i>
                            <p>${user.nickName}</p>
                        </div>
                        <div class="user-info-list-item">
                            <i class="layui-icon layui-icon-location"></i>
                            <p>${user.address}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm12 layui-col-md9">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">基本信息</li>
                        <li>修改头像</li>
                    </ul>
                    <div class="layui-tab-content">
                        <!-- 基本信息 -->
                        <div class="layui-tab-item layui-show">
                            <form class="layui-form" id="userInfoForm" lay-filter="userInfoForm"
                                  style="max-width: 400px;padding: 25px 10px 0 0;">
                                <input type="hidden" name="userId" value="${user.userId}" class="layui-input"/>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">邮箱:</label>
                                    <div class="layui-input-block">
                                        <input name="email" value="${user.email}" class="layui-input"
                                               lay-verify="required" required />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label layui-form-required">昵称:</label>
                                    <div class="layui-input-block">
                                        <input name="nickName" value="${user.nickName}" class="layui-input"
                                               lay-verify="required" required />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄:</label>
                                    <div class="layui-input-block">
                                        <input name="age" value="${user.age}" class="layui-input" lay-verify="required"
                                               required />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别:</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="sex" value="男" title="男" ${user.sex=="男"?"checked":""}>
                                        <input type="radio" name="sex" value="女" title="女" ${user.sex=="女"?"checked":""}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系地址:</label>
                                    <div class="layui-input-block">
                                        <input name="address" value="${user.address}" class="layui-input" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">联系电话:</label>
                                    <div class="layui-input-block">
                                        <input name="phone" value="${user.phone}" class="layui-input"
                                               lay-verify="required" required />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-filter="userInfoSubmit" lay-submit style="background-color: #009688;">更新基本信息
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- 修改头像 -->
                        <div class="layui-tab-item" style="padding-bottom: 20px;">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="updateUserImg">修改头像</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="userImg" style="height: 100px;">
                                    <p id="userImgText"></p>
                                </div>
                                <div style="width: 95px;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <a name="list-progress"> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js?v=318"></script>
<script>
    layui.use(['upload', 'element', 'layer', 'form'], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;

        /* 监听表单提交 */
        form.on('submit(userInfoSubmit)', function(data) {
            $.ajax({
                url:'${pageContext.request.contextPath}/user/updateuser',
                data: data.field,
                dataType:'json',
                type:'post',
                success:function (res) {
                    if(res.code == 0){
                        layer.msg(res.msg,{icon:6},function () {
                            window.location.reload();
                        })
                    }else{
                        layer.msg(res.msg,{icon:5});
                    }
                },
                error:function () {
                    layer.msg('请求失败');
                }
            })
            return false;
        });

        //修改头像
        var uploadInst = upload.render({
            elem: '#updateUserImg'
            , url: '${pageContext.request.contextPath}/user/updateUserImg'
            , before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#userImg').attr('src', result);
                });
                element.progress('demo', '0%');
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                if (res.code > 0) {
                    return layer.msg('修改失败');
                }else {
                    var timer = window.setTimeout(function(){
                        parent.location.reload();
                    },1500);
                }
                $('#userImgText').html('');
            }
            , error: function () {
                var demoText = $('#userImgText');
                demoText.html('<span style="color: #FF5722;">修改失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%');
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
    });
</script>
</body>
</html>
